import { useEffect, useState } from 'react';
import './index.less';
import Layouts from '@/components/Layout';
import { getBanner } from '@/service/api/index';
import { Carousel, Input, Select, Typography, Divider, Button, Space } from 'antd';
import {
  CheckCircleOutlined,
  DashboardOutlined,
  HeatMapOutlined,
  SearchOutlined,
  SmileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import Tour from '@/components/Tour';
import Activity from '@/components/Activity';
import FeedUser from '@/components/FeedUser';
import { history } from 'umi';
import type { Banner } from '@/types';
import configs from '../../../config/env';
import { getCitiesList } from '@/service/api/location';
import type { CitiesList } from '@/types/loaction';
import { getUserList } from '@/service/api/user';
import type { UserInfo } from '@/types/user';
import { getTourList, getActivityList } from '@/service/api/touractivity';
import type { ActivityList, TourList } from '@/types/touractivity';
const { Search } = Input;
const { Option } = Select;
const { Title } = Typography;
const Index: React.FC = () => {
  const toFeed = () => {
    history.push('/feed');
  };
  const [bannerData, setBannerData] = useState<Banner[]>([]);
  const [citiesData, setCititesData] = useState<CitiesList[]>([]);
  const [userListData, setUserListData] = useState<UserInfo[]>([]);
  const [tourData, setTourData] = useState<TourList[]>([]);
  const [activityData, setActivityData] = useState<ActivityList[]>([]);
  const [searchSelect, setSearchSelect] = useState<string>('');
  const getBannerData = async () => {
    const { data }: { data: Banner[] } = await getBanner();
    setBannerData(data);
  };
  const getCitiesListData = async () => {
    const { rows }: { rows: CitiesList[] } = await getCitiesList({
      pageNum: 1,
      pageSize: 6,
    });
    setCititesData(rows);
  };
  const getUserListData = async () => {
    const { rows }: { rows: UserInfo[] } = await getUserList({
      pageNum: 1,
      pageSize: 3,
    });
    setUserListData(rows);
  };
  const getTourListData = async () => {
    const { rows }: { rows: TourList[] } = await getTourList({
      pageNum: 1,
      pageSize: 9,
    });
    setTourData(rows);
  };
  const getActivityListData = async () => {
    const { rows }: { rows: ActivityList[] } = await getActivityList({
      pageNum: 1,
      pageSize: 9,
    });
    setActivityData(rows);
  };
  const onSearch = (value: string) => {
    console.log(value);
    if (searchSelect) {
      history.push({
        pathname: '/tours',
        query: {
          cname: value,
          searchValue: searchSelect,
        },
      });
    } else {
      history.push({
        pathname: '/tours',
        query: {
          cname: value,
        },
      });
    }
  };
  const handleClickSearchCityTour = (cname: string) => {
    history.push({
      pathname: '/tours',
      query: {
        cname,
      },
    });
  };
  const handleChangeSelect = (value: string) => {
    console.log(value);
    setSearchSelect(value);
  };
  const handleClickSwiperItem = (advDetail: TourList) => {
    history.push('/tours-detail/' + advDetail.id);
  };
  useEffect(() => {
    getBannerData();
    getCitiesListData();
    getUserListData();
    getTourListData();
    getActivityListData();
  }, []);
  const selectBefore = (
    <Select value={searchSelect} style={{ width: 100 }} onChange={handleChangeSelect}>
      <Option value="">团队规模</Option>
      <Option value="1">1人</Option>
      <Option value="2">2人</Option>
      <Option value="3">3人</Option>
      <Option value="4">4人</Option>
      <Option value="5">5人</Option>
      <Option value="6">6人</Option>
      <Option value="7">7人</Option>
      <Option value="8">8人</Option>
      <Option value="9">9人</Option>
      <Option value="10">10人</Option>
    </Select>
  );
  const tl = () => {
    return (
      <div className="swiper_container">
        <Carousel autoplay>
          {/* 加个空的在这防止轮播图数据未返回的时候页面塌陷 */}
          {bannerData.length <= 0 && <div className="swiper_item" />}
          {bannerData?.length &&
            bannerData.map((item, index) => (
              <div
                className="swiper_item"
                key={item.id}
                onClick={() => {
                  handleClickSwiperItem(item.advDetail);
                }}
              >
                <div className="swiper_tit">
                  {index === 0 && (
                    <div className="date">
                      <div className="day">3&nbsp;</div> / Feb.2023
                    </div>
                  )}
                  {index === 1 && (
                    <div className="date">
                      <div className="day">4&nbsp;</div> / Feb.2023
                    </div>
                  )}
                  {index === 2 && (
                    <div className="date">
                      <div className="day">5&nbsp;</div> / Feb.2023
                    </div>
                  )}
                  {index === 3 && (
                    <div className="date">
                      <div className="day">6&nbsp;</div> / Feb.2023
                    </div>
                  )}
                  {index === 4 && (
                    <div className="date">
                      <div className="day">7&nbsp;</div> / Feb.2023
                    </div>
                  )}
                  <div className="title">{item.title}</div>
                </div>
                <img src={configs[process.env.API_ENV as any].API_SERVER + item.imgUrl} alt="" />
              </div>
            ))}
        </Carousel>
        <div className="search_group">
          <p className="search_text">找到你的冒险</p>
          <div className="sub_text">与当地主人预订旅游，并与热情的旅行者社区分享经验。</div>
          <Search
            addonBefore={selectBefore}
            placeholder="搜目的地"
            allowClear
            enterButton={
              <span>
                <SearchOutlined style={{ marginRight: 6 }} />
                搜索
              </span>
            }
            size="large"
            onSearch={onSearch}
          />
        </div>
      </div>
    );
  };
  return (
    <>
      <Layouts tl={tl()}>
        <div className="panel_wrapper">
          <Title level={2}>您去哪儿？</Title>
          <div className="panel_content p1">
            {citiesData.map((item) => (
              <div
                className="img_item"
                key={item.id}
                onClick={() => handleClickSearchCityTour(item.cname)}
              >
                {item.imgUrl ? (
                  <img src={configs[process.env.API_ENV as any].API_SERVER + item.imgUrl} alt="" />
                ) : (
                  <img src="/images/brazil.jpg" alt="" />
                )}

                <div className="sm_text">
                  <p className="sm_tit">{item.cname}</p>
                  <div className="sm_sub_text">冒险</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="panel_wrapper">
          <Title level={2}>为什么要预订我们的冒险？</Title>
          <div className="panel_content p2">
            <div className="intro_item wow fadeInUp">
              <div className="top_intro_tit">
                <div className="icons">
                  <SmileOutlined className="intro_icons" />
                </div>
                <Title level={4} style={{ textAlign: 'center' }}>
                  我们做冒险
                  <br />
                  只有冒险
                </Title>
              </div>
              <div className="bottom_intro_text">
                您不会在这里找到游轮或晚餐表演。我们受到启发，可以到户外攀岩，登山，滑雪，
                远足，皮划艇，冲浪，潜水等等。如果我们最终在一个偏远的村庄或一个隐藏的瀑布旁，
                那就更好了！
              </div>
            </div>
            <div className="intro_item">
              <div className="top_intro_tit">
                <div className="icons">
                  <UserOutlined className="intro_icons" />
                </div>
                <Title level={4} style={{ textAlign: 'center' }}>
                  热情、负责的
                  <br />
                  当地探险家
                </Title>
              </div>
              <div className="bottom_intro_text">
                每台主机都经过质量和可靠性审查。我们只与P2P主持人，认证导游和小型旅行社合作。我们支持本地业务;不是大型旅游集团。
              </div>
            </div>
            <div className="intro_item">
              <div className="top_intro_tit">
                <div className="icons">
                  <CheckCircleOutlined className="intro_icons" />
                </div>
                <Title level={4} style={{ textAlign: 'center' }}>
                  预订旅游
                  <br />
                  很容易
                </Title>
              </div>
              <div className="bottom_intro_text">
                给我们的主人发消息安排旅游，或者只是选择一天并预订。与探险体验达人和我们知识渊博的客户服务团队轻松沟通。
              </div>
            </div>
          </div>
        </div>
        <div className="panel_wrapper">
          <Title level={2}>了解每天为我们做出贡献的旅行者</Title>
          <div className="panel_content p3">
            {userListData.map((item) => (
              <FeedUser
                key={item.userId}
                avatar={item.avatar}
                nickName={item.nickName}
                userId={item.userId}
                tags={item.tags}
              />
            ))}
          </div>
          <Divider style={{ marginTop: 0 }} />
          <div className="btn_group">
            <Space>
              <Button type="primary" size="large" onClick={toFeed}>
                认识我们的社区
              </Button>
            </Space>
          </div>
        </div>
        <div className="panel_wrapper">
          <Title level={2}>浏览我们独特的导游冒险</Title>
          <div className="sub_title">寻找当地导游，并从最了解他们的人那里预订冒险</div>
          <div className="panel_content p4">
            {tourData.map((item) => (
              <Tour
                key={item.id}
                title={item.title}
                id={item.id}
                time={item.time}
                price={item.price}
                remark={item.remark}
                userInfo={item.user}
                bacImg={item.bacImg}
                tags={item.tags}
              />
            ))}
          </div>
          <div className="btn_group">
            <Button
              type="primary"
              size="large"
              onClick={() => {
                history.push('/tours');
              }}
            >
              探索所有旅游
            </Button>
          </div>
        </div>
        <div className="panel_wrapper">
          <Title level={2}>为什么要成为探险达人？</Title>
          <div className="panel_content p2">
            <div className="intro_item wow fadeInUp">
              <div className="top_intro_tit">
                <div className="icons">
                  <HeatMapOutlined className="intro_icons" />
                </div>
                <Title level={4} style={{ textAlign: 'center' }}>
                  分享您熟悉和喜爱的冒险
                  <br />
                  经历
                </Title>
              </div>
              <div className="bottom_intro_text">
                将您的户外热情、背景、认证和专业知识用于小径、冰上、雪地、水中和空中
              </div>
            </div>
            <div className="intro_item">
              <div className="top_intro_tit">
                <div className="icons">
                  <DashboardOutlined className="intro_icons" />
                </div>
                <Title level={4} style={{ textAlign: 'center' }}>
                  完全
                  <br />
                  的灵活性
                </Title>
              </div>
              <div className="bottom_intro_text">
                随时随地托管您想要的东西。您拥有完全的创意控制权。做你最擅长的事情，不要公司干预
              </div>
            </div>
            <div className="intro_item">
              <div className="top_intro_tit">
                <div className="icons">
                  <TeamOutlined className="intro_icons" />
                </div>
                <Title level={4} style={{ textAlign: 'center' }}>
                  我们团队的
                  <br />
                  全力支持
                </Title>
              </div>
              <div className="bottom_intro_text">
                向近 20，000
                名关注者和订阅者营销和宣传您的冒险体验。所有旅行团均可享受免责和可选的附加保险
              </div>
            </div>
          </div>
        </div>
        <div className="panel_wrapper">
          <Title level={2}>探索世界</Title>
          <div className="sub_title">发现国内外令人兴奋的新事</div>
          <div className="panel_content p4">
            {activityData.map((item) => (
              <Activity
                key={item.id}
                id={item.id}
                country={item.country}
                remark={item.describes}
                userInfo={item.user}
                imgUrl={item.imgUrl}
                title={item.title}
                tags={item.tags}
                city={item.city}
              />
            ))}
          </div>
          <div className="btn_group">
            <Button
              type="primary"
              size="large"
              onClick={() => {
                history.push('/things-to-do');
              }}
            >
              探索所有活动
            </Button>
          </div>
        </div>
      </Layouts>
    </>
  );
};
export default Index;
